<!-- 第三个项目简介 -->
<template>
  <div class="mbmain">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>黑马优购(B站项目)</span>
        <!-- <a href="http://test.xiaomingtx.top/#/login" target="_blank" style="text-decoration:none;">黑马优购(B站项目)</a> -->
      </div>
      <div class="container">
        <div class="flexBox">
          <span>项目简介：该项目是一款购买电子商品的微信小程序，可以便人们查看或购买电子商品，无需下载 app，就可以进行操作。 </span>
          <span>功能模块：首页、分类、购物车、我的界面、详情页面、上拉加载、下拉刷新、搜索等等的功能实现。</span>
          <span>技术要点： </span>
          <span>1、基于 uniapp 开发的微信小程序商城项目</span>
          <span>2、使用小程序组件搭建基本框架，配置路由项完成各个模块的跳转。 </span>
          <span>3、使用微信 API 实现获取用户授权。</span>
          <span>4、通过查询微信 API 文档，使用 navigateBack、navigateTo 等进行页面之间的跳转。</span>
          <span>5、通过配置 tabbar 指定配置项 tab 的表现以及切换时显示对应的页面 </span>
          <span></span>
          <span>页面效果图： </span>
        </div>
        <img src="../../assets/images/wx/1.png" alt="" style="width: 45%;">
        <img src="../../assets/images/wx/2.png" alt="" style="margin-left: 10px; width: 45%;">
        <img src="../../assets/images/wx/3.png" alt="" style="margin-top: 10px; width: 45%;">
        <img src="../../assets/images/wx/4.png" alt="" style="margin-top: 10px; margin-left: 10px; width: 45%;">
        <img src="../../assets/images/wx/5.png" alt="" style="margin-top: 10px; width: 45%;">
        <img src="../../assets/images/wx/6.png" alt="" style="margin-top: 10px; margin-left: 10px; width: 45%;">
        <img src="../../assets/images/wx/7.png" alt="" style="margin-top: 10px; width: 45%;">
        <img src="../../assets/images/wx/8.png" alt="" style="margin-top: 10px; margin-left: 10px; width: 45%;">
        <img src="../../assets/images/wx/9.png" alt="" style="margin-top: 10px; width: 45%;">
        <img src="../../assets/images/wx/10.png" alt="" style="margin-top: 10px; margin-left: 10px; width: 45%;">
        <img src="../../assets/images/wx/11.png" alt="" style="margin-top: 10px; width: 45%;">
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  methods: {
  },
  created() {
  },
  mounted() {
  }
}
</script>
<style lang="less" scoped>
/deep/.el-main {
  overflow: none;
  height: 0;
}

.mbmain {
  overflow-y: scroll;
  height: 600px;
}
.box-card {
  width: 100%;
  background-color: rgba(242, 242, 242, 0.6);
  margin-bottom: 10px;
}

.clearfix span {
  font-size: 16px;
  font-weight: 700;
  color: #555555;
}

.container {
  width: 100%;
  background-color: transparent;
  border-radius: 10px;
}
.flexBox {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font-weight: 600;

  span {
    height:30px;
    line-height: 30px;
  }
}
</style>
